<template>
  <div class="baseDialog">
    <div>
      <el-drawer
        ref="drawer"
        :title="$i18n.t('mesTechnology.selectEquipment')"
        :visible.sync="drawer"
        direction="rtl"
        size="60%"
        :before-close="handleClose"
      >
        <ele-page
          :key="drawer"
          v-loading="loading"
          :formConfig="searchConfig"
          ref="eleTable"
          :operateList="operateList"
          @handleOperateEvent="handleOperateEvent"
          @row-dblclick="getSelectMesTechnology"
          :column="column"
          :getList="getList"
          uniqueId="mesTechnologyTable"
        >
        </ele-page>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { getEquipmentList as getList } from "@/api/process/mesTechnologyOperate";
import { getDict } from "@/api/common";

export default {
  name: "EquipmentDialog",
  data() {
    return {
      title: null,
      drawer: false,
      isLoading: false,
      loading: false,
      searchConfig: {
        inline: true,
        formDesc: {
          equipmentCode: {
            layout: 12,
            type: "input",
            label: $i18n.t("mesTechnology.equipmentCode"),
          },
          equipmentName: {
            layout: 12,
            type: "input",
            label: $i18n.t("mesTechnology.equipmentName"),
          },
          modelingName: {
            layout: 12,
            type: "input",
            label: $i18n.t("mesTechnology.modelingName"),
          },
        },
      },
      operateList: [
        {
          name: $i18n.t("common.cancel"),
          handleName: "cls", //点击时返回的标识
        },
        {
          name: $i18n.t("mesTechnology.confirmAdd"),
          type: "success",
          icon: "el-icon-success",
          handleName: "add", //点击时返回的标识
          isMultiple: true,
          disabled: (data) => {
            return data.length < 1;
          },
        },
      ],
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
        },
        {
          prop: "equipmentCode",
          label: $i18n.t("mesTechnology.equipmentCode"),
        },
        {
          prop: "equipmentName",
          label: $i18n.t("mesTechnology.equipmentName"),
        },
        {
          prop: "regionName",
          label: $i18n.t("mesTechnology.regionName"),
        },
        {
          prop: "modelingName",
          label: $i18n.t("mesTechnology.modelingName"),
        },
        {
          prop: "equipmentStatus",
          label: $i18n.t("mesTechnology.equipmentStatus"),
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("equipment_status_method");
            return list.data.result;
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    cancelForm(bool) {
      this.drawer = bool;
    },
    handleClose(done) {
      done();
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name;
      const fnc = {
        search: () => {},
        cls: () => {
          this.cancelForm(false);
        },
        add: () => {
          if (data.rows.length > 0) {
            this.$emit("response", data.rows);
            this.cancelForm(false);
          } else {
            this.$message.warning($i18n.t("common.single"));
          }
        },
      };
      fnc[data.handleName]();
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
    // 弹框表格，双击表格，或者点击确定 返回选中数据
    getSelectMesTechnology(data) {
      var li = [];
      li[0] = data;
      this.$emit("response", li);
      this.cancelForm(false);
    },
  },
};
</script>
<style lang="scss" scoped>
.baseDialog {
  /deep/.el-drawer__body {
    padding: 0 10px;
  }
  /deep/ .ele-form-search {
    height: auto !important;
  }
}
</style>
